<template>
    <div class="login-container">
        <form id="login-form" class="mui-input-group">
            <div class="mui-input-row">
                <label>账号</label>
                <input id="account" type="text" class="mui-input-clear mui-input" placeholder="请输入账号" data-input-clear="2" v-model="username"><span class="mui-icon mui-icon-clear mui-hidden"></span>
            </div>
            <div class="mui-input-row">
                <label>密码</label>
                <input id="password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码" data-input-clear="3" v-model="password"><span class="mui-icon mui-icon-clear mui-hidden"></span>
            </div>
        </form>
        <div class="mui-content-padded">
            <button id="login" type="button" class="mui-btn mui-btn-block mui-btn-primary" @click="login">登录</button>
            <div class="link-area"><router-link id="reg" to="/register">注册账号</router-link> <span class="spliter">|</span> <a id="forgetPassword">忘记密码</a>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return{
                username:'',
                password:''
            }
        },
        methods:{
            login(){
                this.$emit('fun',{
                    username:this.username,
                    password:this.password,
                });
            }
        }

    }
</script>

<style scoped>

</style>